<template>
	<view class="page">
		<view class="content">
			<text class="price">¥ {{price}}</text>
			<text class="goods-count">共{{count_num}}件商品</text>
			<view class="tel-wrap">
				<text>收货手机号： </text>
				<text style="color: #999;">{{receive_phone}}</text>
			</view>
		<text class="ways">请选择支付方式</text>
		<view class="wechat">
			<image src="/static/img/wx.png"></image>
			<text>微信支付</text>
			<view class="circle-wrap" @click="wechatClick">
				<view class="circle" v-if="selected"></view>
			</view>
		</view>
		<view class="alipay">
			<image src="/static/img/zfb.png"></image>
			<text>支付宝支付</text>
			<view class="alipay-circle-wrap" @click="alipayClick">
				<view class="alipay-circle" v-if="!selected"></view>
			</view>
		</view>
		<view class="pay-now" @click="gettoPay()" >
			<text >立即支付</text>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad: function(options) {
			this.receive_phone = options.receive_phone
			this.order_number = options.order_number
			this.order_id = options.order_id

			this.price = options.total_price
			this.count_num = options.count_num
			//调用需要的方法 
		},
		data() {
			return {
				selected: true,
				receive_phone:'',
				pay:1,//默认微信支付
				price:'2000.00',
				order_number:'1',
				total_price:'0.00',
				count_num:1,

			}
		},
		methods: {
			wechatClick() {
				if(!this.selected) {
					this.pay=1;
					
					this.selected = !this.selected;
				}
			},
			alipayClick() {
				if(this.selected) {
					this.pay=2
					this.selected = !this.selected;
				}
			},
			//支付
			
			gettoPay() { 
				let pay_type=this.pay;
					uni.showLoading({
						title:'付款中，请稍后'
					})
					//支付宝 
				this.$api.gettoPay({order_number:this.order_number,pay_type:pay_type,price:this.price,}).then(res => {
				
					
					if(res.data.status == true){
						let payinfo=res.data.data
						var t = this
						if(pay_type == 2){
							uni.requestPayment({
									provider: 'alipay',
									orderInfo: payinfo,
									success: function (res) {
										// setTimeout(function () {uni.hideLoading();}, 100);
										// uni.showLoading({
										//   title: '跳转中',
										// })
										uni.hideLoading()
										uni.redirectTo({
										
										url: '/pages/pay/PaySuccess?order_nubmer='+t.order_number+'&count_num='+t.count_num+'&order_id='+t.order_id+'&receive_phone='+t.receive_phone+'&price='+t.price+'&pay_type='+pay_type
										});
									},
									fail: function (err) {
										uni.hideLoading()
										uni.showModal({
								
											content: "抱歉，您的支付不成功",
											showCancel: false
										})
									},
								})
						
							this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
						}else{
							//微信
							uni.requestPayment({
									provider: 'wxpay',
									orderInfo: payinfo, //微信、支付宝订单数据
									success: function (res) {
										// setTimeout(function () {uni.hideLoading();}, 100);
										// uni.showLoading({
										//   title: '跳转中',
										// })
										uni.hideLoading()
										uni.redirectTo({
										url: '/pages/pay/PaySuccess?order_nubmer='+t.order_number+'&count_num='+t.count_num+'&order_id='+t.order_id+'&receive_phone='+t.receive_phone+'&price='+t.price+'&pay_type='+pay_type
										});
									},
									fail: function (err) {
										uni.hideLoading()
										console.log(err)
										return false 
										uni.showModal({
											content: "抱歉，您的支付不成功",
											showCancel: false
										})
									},
								})
						
							this.$forceUpdate(); //强制刷新，解决页面不会重新渲染的问题
							
						}
					}else{
						uni.showToast({
						   title:'支付失败' ,
													
						})
					}
					
				})
			},
				
		},
		
		}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh;
		
	}
	.content {
		width: 750rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.price {
		display: block;
		height: 39rpx;
		font-size: 52rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: rgba(254,177,71,1);
		/* margin-left: 280rpx; */
		margin-top: 100rpx;
		width:100%;
		text-align:center;
	}
	.goods-count {
		display: block;
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153,153,153,1);
		/* margin-left: 304rpx; */
		margin-top: 80rpx;
		width:100%;
		text-align:center;
	}
	.tel-wrap {
		/* width: 400rpx; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		/* margin-left: 175rpx; */
		margin-top: 80rpx;
		width:100%;
		text-align:center;
	}
	.ways {
		display: block;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-top: 100rpx;
	}
	.wechat {
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 122rpx;
		border-top:1px solid rgba(204,204,204,1);
		margin-left: 30rpx;
		margin-top: 40rpx;
		overflow: auto;
	}
	.wechat image {
		width: 60rpx;
		height: 53rpx;
		margin-left: 50rpx;
	}
	.wechat text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 60rpx;
	}
	.circle-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid rgba(254,177,71,1);
		border-radius: 50%;
		margin-left: 316rpx;
	}
	.circle {
		width: 18rpx;
		height: 18rpx;
		background: rgba(254,177,71,1);
		border-radius: 50%;
	}
	.alipay {
		display: flex;
		align-items: center;
		width: 690rpx;
		height: 122rpx;
		margin-left: 30rpx;
		border-top:1px solid rgba(204,204,204,1);
		border-bottom:1px solid rgba(204,204,204,1);
	}
	.alipay text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51,51,51,1);
		margin-left: 50rpx;
	}
	.alipay image {
		width: 68rpx;
		height: 55rpx;
		margin-left: 50rpx;
	}
	.alipay-circle-wrap {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 28rpx;
		height: 28rpx;
		border: 2rpx solid rgba(254,177,71,1);
		border-radius: 50%;
		margin-left: 285rpx;
	}
	.alipay-circle {
		width: 18rpx;
		height: 18rpx;
		background: rgba(254,177,71,1);
		border-radius: 50%;
	}
	.pay-now {
		width: 440rpx;
		height: 88rpx;
		line-height: 64rpx;
		background: rgba(253,149,47,1);
		border-radius: 10rpx;
		margin-top: 200rpx;
		
	}
	.pay-now text {
		width: 440rpx;
		height: 88rpx;
		display: block;
		text-align: center;
		line-height: 88rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
		
	} 
</style>
